<template>
  <div class="page login_page">
    <div class="logo">
      <img src="@/assets/images/login_logo.png" alt="" />
    </div>

    <div class="login_box">
      <div class="left_box">
        <img src="@/assets/images/login_img.png" alt="" />
      </div>
      <div class="right_box">
        <div class="title">系统登录</div>
        <el-form
          ref="loginForm"
          :rules="rules"
          :model="formLogin"
          label-width="0"
        >
          <div class="login">
            <el-form-item prop="account" class="form_item">
              <div class="input_box">
                <img
                  src="@/assets/images/login_user.png"
                  class="pre_icon"
                  alt=""
                />
                <el-input
                  type="text"
                  v-model="formLogin.account"
                  clearable
                  autocomplete="new-password"
                  class="a_input"
                  placeholder="请输入账号"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item prop="password" class="form_item">
              <div class="input_box">
                <img
                  src="@/assets/images/login_lock.png"
                  class="pre_icon"
                  alt=""
                />
                <el-input
                  type="password"
                  v-model="formLogin.password"
                  clearable
                  autocomplete="new-password"
                  class="a_input"
                  placeholder="请输入账号"
                ></el-input>
              </div>
            </el-form-item>
            <!-- <div class="">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
              <el-link>忘记密码</el-link>
            </div> -->
            <div class="btn_box">
              <button class="btn" @click.prevent="submit" :loading="loading">
                登录
              </button>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { USERCAPTCHA, REQUESTLOGIN } from "@/http/interface";
import store from "@/store";
export default {
  components: {},
  data() {
    return {
      // 表单
      formLogin: {},
      loading: false,
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      captcha: "",
    };
  },
  mounted() {
    this.getCaptcha();
  },
  methods: {
    // 提交登录信息
    submit() {
      let _this = this;
      let oParams = this.formLogin;
      this.loading = true;
      this.$refs.loginForm.validate((valid) => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        oParams.loginType = "a";
        REQUESTLOGIN(oParams)
          .then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              let obj = res.data;
              sessionStorage.setItem("token", obj.token);
              sessionStorage.setItem("user", JSON.stringify(obj.user));
              store.dispatch("getMenu").then((list) => {
                let m = (list || []).find((k) => !k.hidden);
                let firstPath = "";
                console.log(m);
                if (m) {
                  firstPath = m.children ? m.children[0].path : m.path;
                } else {
                  firstPath = "/";
                }
                console.log(firstPath);
                _this.$router.push({ path: firstPath });

                // store.dispatch("generateRoutes", list).then((res) => {
                //   console.log(res)
                //   //let firstPath = res[2].children?res[2].children[0].path:'';
                //   let m = (res||[]).find(k => !k.hidden)
                //   let firstPath = m&& m.path;
                //   console.log(firstPath)
                //   _this.$router.push({ path: firstPath })

                // });
              });
              //_this.$router.push({ name: "index" });
              //_this.$store.dispatch('getMenu');
            }
          })
          .catch((error) => {
            _this.loading = false;
          });
      });
    },

    /** 获取验证码 */
    getCaptcha() {
      this.captcha = USERCAPTCHA + "?v=" + Math.random();
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  //background: linear-gradient(202deg, #167fff, #16a5ff);
  background: url("../../assets/images/login_bg.png") no-repeat;
  background-size: cover;

  .logo {
    text-align: center;
    margin-top: 100px;
    img {
      width: 299px;
      height: 68px;
    }
  }
  .login_box {
    display: flex;
    width: 1084px;
    height: 576px;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #707070;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 66px;
    padding: 80px 30px 30px 30px;

    .left_box {
      flex: 1;
      // padding-right: 84px;
      padding-left: 33px;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 459px;
        height: 394px;
      }
    }
    .right_box {
      // width: 400px;
      // height: 400px;
      background: #ffffff;
      border-radius: 10px;
      .title {
        font-size: 24px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
        font-weight: normal;
        color: #666666;
        line-height: 35px;
        text-align: center;
        span {
          font-family: Arial;
          font-weight: bold;
        }
      }
      .login {
        // padding: 0 40px;
        margin-top: 18px;
        width: 508px;
        box-sizing: border-box;
        .input_box {
          width: 508px;
          height: 66px;
          background: #f1f6fd;
          border: 1px solid #e2e3e5;
          border-radius: 4px;
          display: flex;
          align-items: center;
          // padding: 0 0 0 24px;
          // margin: 30px 0;
          padding: 0 16px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .pre_icon {
            width: 28px;
            height: 28px;
            margin-right: 12px;
          }

          .a_input {
            // height: 66px;
            flex: 1;
            height: 100%;
            outline: none;
            font-size: PingFang-SC-Regular;
            font-size: 20px;
            font-weight: normal;
            color: #c7d0df;

            ::v-deep .el-input__inner {
              background: #f1f6fd;
              border: 0;
              height: 100%;
            }
          }
        }
        .is-error {
          .input_box {
            border: 1px solid #f00;
          }
        }
        .form_item {
          margin-bottom: 40px;
        }
        .btn_box {
          border: 0;
          padding: 0;
          margin: 136px 0 0 0;
          .btn {
            width: 508px;
            height: 66px;
            background: #0097e0;
            border-radius: 5px;
            border: 0;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            cursor: pointer;
            box-sizing: border-box;
            padding: 0;
          }
          .btn:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>